<template>
  <view class="content">
    <scroll-view>
      <view class="carousel">
        <swiper circular autoplay interval="3000" indicator-dots>
          <swiper-item v-for="(item, index) in bannerData" :key="index">
            <navigator hover-class="none" class="navigator">
              <image class="image" :src="item.imgUrl"></image>
            </navigator>
          </swiper-item>
        </swiper>
      </view>

      <view class="body">
        <uni-grid :column="2" :highlight="true" @change="goDetail">
          <uni-grid-item
            v-for="(item, index) in boxList"
            :index="item.id"
            :key="item.id"
          >
            <view class="grid-item-box" style="background-color: #fff">
              <image
                :src="item.imgUrl"
                mode="scaleToFill"
                style="width: 50rpx; height: 50rpx"
              />
              <text class="text">{{ item.title }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import home_car from "@/static/home/home_car.png";
import home_Coupons from "@/static/home/home_Coupons.png";
import home_fuli from "@/static/home/home_fuli.png";
import home_print from "@/static/home/home_print.png";
export default {
  data() {
    return {
      title: "Hello",
      background: ["color1", "color2", "color3"],
      bannerData: [
        {
          id: "227415",
          type: "1",
          imgUrl:
            "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg",
        },
        {
          id: "326416",
          type: "4",
          imgUrl:
            "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg",
        },
        {
          id: "163424",
          type: "2",
          imgUrl:
            "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg",
        },
        {
          id: "223413",
          type: "1",
          imgUrl:
            "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_4.jpg",
        },
        {
          id: "423426",
          type: "3",
          imgUrl:
            "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_5.jpg",
        },
      ],
      boxList: [
        {
          id: 1,
          title: "优惠券",
          imgUrl: home_Coupons,
        },
        {
          id: 2,
          title: "商城",
          imgUrl: home_car,
        },
        {
          id: 3,
          title: "打印业务",
          imgUrl: home_print,
        },
        {
          id: 4,
          title: "福利活动",
          imgUrl: home_fuli,
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    goDetail(e) {
      if (e.detail.index == 2) {
        uni.navigateTo({
          url: "/pages/goods/goods",
        });
        return;
      }else if (e.detail.index == 1) {
		uni.navigateTo({
		  url: "/pages/coupon/coupon",
		});
		return;
	  }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.carousel {
  height: 300rpx;
  position: relative;

  border-radius: 10rpx;
  overflow: hidden;
  transform: translateY(0);
}

.carousel .navigator,
.carousel .image {
  width: 100%;
  height: 100%;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.body {
  margin: 10rpx;
}
</style>
